<template>
	<!-- <h3>子组件</h3>
	<h2>子组件向父组件传达数据</h2>
	num:{{num}}
	<button @click="add">点击触发自定义事件传递数据给父组件</button> -->
	<hr />
	<h3>用户注册案例</h3>
	<form @submit.prevent="demo">
		<div>用户名：<input type="text" v-model="formdata.username" /></div>
		<div>密码：<input type="text" v-model="formdata.password" /></div>
		<div>
			性别：
			<input type="radio" value="男" v-model="formdata.gender" />男
			<input type="radio" value="女" v-model="formdata.gender" />女		
		</div>
		<input type="submit" value="注册"/>
	</form>
	
</template>

<script setup>
	import {ref} from 'vue'
	//1 在子组件中声明自定义事件，通过调用defineEmits()函数声明自定义事件
	// const num=ref(2)
	// const emit=defineEmits(['upate'])
	
	//2 在子组件中触发自定义事件，直接定义方法来触发自定义事件
	//语法：emit('demo', 2)
	//在事件处理器中调用emit()
	// const add=()=>{
	// 	num.value++
	// 	emit('upate',num.value)
	// }
	
	//用户注册的数据
	const formdata=ref({
		username:'',
		password:'',
		gender:''
	})
	//声明
	 const emit=defineEmits(['upadedemo'])
	 //事件处理器
	 const demo=()=>{
		 emit('upadedemo',formdata.value)
	 }	
</script>

<style scoped>
</style>